@use '@linwooddev/style/scss/mixins.scss' as lw;

:root {
  --ls-primary: var(--sl-color-accent);
  --ls-primary-text: #fff;
  --sl-color-accent-low: var(--sl-color-accent);
  --sl-color-accent-high: var(--sl-color-accent);
  --sl-color-black: var(--ls-background);
  --sl-color-gray-1: var(--ls-elevation);
  --sl-color-gray-2: var(--ls-elevation);
  --sl-color-gray-3: var(--ls-elevation);
  --sl-color-gray-4: var(--ls-elevation);
  --sl-color-gray-5: var(--ls-elevation);
  --sl-color-gray-6: var(--ls-elevation);
  --sl-color-gray-7: var(--ls-elevation);
  --sl-color-text: var(--ls-background-text);
}
:root[data-theme="light"] {
  --ls-elevation: rgba(0, 0, 0, 0.1);
  --ls-background-text: #000;
  --ls-background: #fff;
}
header {
  backdrop-filter: lw.$elevation-filter;
}
.tagline, label, .site-title {
  color: var(--ls-background-text);
}

.sl-link-button {
  @include lw.button-base();
}

a.btn {
  @include lw.button-base;
}

.sl-markdown-content a:not(:where(.not-content *)) {
  @include lw.link-base;
}

.actions {
  gap: 0.5rem;
}

input {
  @include lw.input-base();
}
.label-icon {
  z-index: 1;
  margin-left: 0.5rem;
}
select {
  @include lw.choice-base;
  @include lw.select-enhancements();
  background-image: none;
  width: revert-layer;
  padding-left: 1.75rem;
}
option {
  @include lw.option-base();
  color: var(--ls-background-text);
}
.sl-link-card a {
  text-decoration: none;
}
.sidebar-content {
  padding-left: 6px;
  summary {
    @extend .secondary;
    @include lw.button-base;
    justify-content: space-between;
    margin-bottom: 4px;
    &:hover {
      text-decoration: none;
    }
    span {
      color: inherit;
    }

  }
  li a {
    @include lw.button-base;
    justify-content: start;
  }
  [aria-current='page'],
  [aria-current='page']:hover,
  [aria-current='page']:focus {
    @extend .primary;
  }
}

:where(site-search button):not(:where(site-search dialog button)) {
  @include lw.input-base();
  width: revert-layer;
}

.social-icons {
  display: flex;
  gap: 1.5rem;
}

span {
  --sl-color-gray-2: var(--ls-background-text);
}

a {
  --sl-color-gray-3: var(--ls-background-text);
  --sl-color-gray-2: var(--ls-background-text);

  &[aria-current="true"] {
    color: var(--ls-primary);
  }
  .tab &:hover {
    text-decoration: none;
    color: var(--ls-primary);
  }
  &:not(:where(.pagination-links *, .sl-link-button, .sl-link-card *, .tab *)):hover {
    text-decoration: underline;
  }
}

.social-icons a {
  @extend .secondary;
  @include lw.button-base();
  padding: 0.5rem;
  border-radius: 50%;
}
